<template>
  <div class="petHome-container">
    <div class="home-item" v-for="home in list" @click="handleHomeClick(home)">
      <div class="home-type">{{ home.type === "1" ? "猫舍" : "犬舍" }}</div>
      <div class="home-name">{{ home.name }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getAllHome } from "@/api/SearchChannel/catApi";
import { onMounted } from "vue";

const router = useRouter();

const list: any = ref([]);
onMounted(async () => {
  const resp = await getAllHome();
  list.value = resp;
});

function handleHomeClick(home: any) {
  router.push({
    path: "/searchChannel",
    query: {
      catteryId: home.id,
      petType: home.type === "1" ? "猫舍" : "犬舍",
      catteryName: home.name,
      imgUrls: home.imgUrl
    },
  });
}
</script>

<style lang="scss" scoped>
@import "@/css/respondMixin";
@import "@/css/variable";

.petHome-container {
  width: $contentwidth;
  margin: 0 auto;

  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 200px);
  @include respond-to("phone") {
    grid-template-columns: repeat(auto-fill, 5rem);
    padding: 0 $contentBothPadding;
    width: auto;
  }

  .home-item {
    padding: 20px;
    width: 200px;
    background-color: #fff;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.12);
    margin: 10px auto;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;

    @include respond-to("phone") {
      width: 5rem;
    }

    .home-type {
      font-size: 18px;
    }

    .home-name {
      color: rgba(0, 0, 0, 0.56);
    }

    // &:hover .home-name {
    //   color: #009688;
    // }
  }
}
</style>
